<template>
    <div class="keyNumberAreaWrap">
       <div class="numberWrap">
            <div class="number" >
                <button @click="downKey(1)">1</button>
            </div>
            <div class="number" >
                <button @click="downKey(2)">2</button>
            </div>
            <div class="number" >
                <button @click="downKey(3)">3</button>
            </div>
       </div>
       <div class="numberWrap">
            <div class="number" >
                <button @click="downKey(4)">4</button>
            </div>
            <div class="number" >
                <button @click="downKey(5)">5</button>
            </div>
            <div class="number" >
                <button @click="downKey(6)">6</button>
            </div>
       </div>
       <div class="numberWrap">
            <div class="number" >
                <button @click="downKey(7)">7</button>
            </div>
            <div class="number" >
                <button @click="downKey(8)">8</button>
            </div>
            <div class="number" >
                <button @click="downKey(9)">9</button>
            </div>
       </div>

       <div class="numberWrap">
            <div class="number" >
                <button @click="downKey(0)">0</button>
            </div>
            <div class="number" >
                <button @click="downKey(1000000)">100 0000</button>
            </div>
            <div class="number" >
                <button @click="downKey(1000000000)">10 0000 0000</button>
            </div>
       </div>
    </div>
</template>

<style lang="less" scoped>
    .keyNumberAreaWrap{
        border:5px solid #eee;
        padding:10px;
        .numberWrap{
            display: flex;
            margin-top:10px;
            .number{
                flex:1;
                button{
                    width:100px;
                    height:50px;     
                    border:none;
                    outline:none;
                    box-shadow:3px 3px 3px 0 #000 inset;
                    background:#fff;
                    border-radius:10px;
                    font-weight:500;
                    font-size:14px;
                }
            }
        }
    }

</style>
<script lang="ts">

import {Component,Vue } from 'vue-property-decorator'
import ActionHelper from '@/store/ActionHelper'

@Component({
    components: {

    }
})

export default class KeyNumberAreaWrap extends Vue{
     
    downKey(val:number):void{
         
        let operator  = this.$store.state.operator
        let actionHelper = new ActionHelper()
        this.$store.commit("updateCurrentTotalStr",val) 

        switch(operator){

            case '+':
                actionHelper.plus(val)
                break;
            case '-':
                actionHelper.sub(val)
                break;
            case '*':
                actionHelper.mul(val)
                break;
            case '/':
                actionHelper.chu(val) 
                break; 
            default:
                this.$store.commit("updateCalResult",val) 
                break;         
        }
    }
    
}


</script>
